import { useEffect, useMemo, JSX } from "react"
import { Repository } from "@/atoms/api_repositories"
import { createLogger } from "@/utils/logger"

const logger = createLogger("useAccountInteraction")

export function useMainPage() {
    const { data: userInfo, fetch: fetchUserInfo, loading, error } = Repository.useRefGetProfile()
    const { data: kycInfo, fetch: fetchKycInfo } = Repository.useKyc()

    const hasEmail = useMemo(() => userInfo?.has_email, [userInfo?.has_email])
    const avatarUrl = userInfo?.avatar

    useEffect(() => {
        const fetchData = async () => {
            try {
                await Promise.all([fetchUserInfo(), fetchKycInfo()])
            } catch (error) {
                logger.debug("Failed to fetch account data:", error)
            }
        }
        fetchData()
    }, [fetchUserInfo, fetchKycInfo])

    return {
        userInfo,
        kycInfo,
        hasEmail,
        avatarUrl,
        loading,
        error,
    }
}
